<template>
  <div class="container">
    <!-- 位置 -->
    <div class="list-title" v-if="[1, 2, 3].includes(seriesSettings.lesionType)">
      位置审核
    </div>
    <div class="list-content" v-if="[1, 2, 3].includes(seriesSettings.lesionType)">
      <div class="content-item">
        <div class="content-process" v-if="seriesSettings.lesionType === 3">
          <div class="first-box">
            <span
              >医生{{
                +seriesSettings.firstMarkUserId === 0
                  ? ""
                  : +seriesSettings.firstMarkUserId
              }}</span
            >
          </div>
          <!-- <div class="second-box">
            <span
              >医生{{
                +seriesSettings.secondMarkUserId === 0
                  ? ""
                  : seriesSettings.secondMarkUserId
              }}</span
            >
          </div> -->
        </div>
        <div
          class="content-process"
          v-if="seriesSettings.lesionType === 1 || seriesSettings.lesionType === 2"
        >
          <div class="fit-box">
            <span style="color: #70e2f0"
              >医生{{
                +seriesSettings.firstMarkUserId === 0
                  ? ""
                  : +seriesSettings.firstMarkUserId
              }}</span
            >/
            <span style="color: #d338ff"
              >医生{{
                +seriesSettings.secondMarkUserId === 0
                  ? ""
                  : +seriesSettings.secondMarkUserId
              }}</span
            >
          </div>
        </div>
      </div>
      <div class="radio-group">
        <a-radio-group
          v-model="seriesSettings.positionVal"
          :disabled="disabled"
          @change="($event: string | number | boolean) => handleChange($event, true)"
        >
          <a-radio :value="1">正确</a-radio>
          <a-radio :value="0">错误</a-radio>
        </a-radio-group>
      </div>
    </div>
    <!-- 标注征象 -->
    <div class="list-title">征象审核</div>
    <div class="list-content">
      <FormComp
        :form="seriesSettings.form"
        :form-options="seriesSettings.formOptions"
        :formRef="formRef"
        @update:handle-change="($event: any) => handleChange($event)"
        :disabled="disabledForm"
      />
    </div>
  </div>
</template>
<script lang="ts" setup name="LabelingSigns">
import { computed } from "vue";
import { useRoute } from "vue-router";
import FormComp from "./formComp.vue";
import type * as PHStoreType from "@/store/modules/processHeader/type";
const route = useRoute();
const props = defineProps({
  seriesSettings: {
    type: Object,
    default: {} as PHStoreType.LesionData,
  },
  disabled: {
    type: Boolean,
    default: false
  },
  formRef: {
    type: Object,
    default: {}
  }
});
const disabledForm = computed(() => {
  return (
    (props.seriesSettings.positionVal === 0 && props.seriesSettings.lesionType !== 4) ||
    route.query.type === "view"
  );
});
const emit = defineEmits(["update:handleChange"]);
const handleChange = ($event: any, type?: boolean) => {
  emit("update:handleChange", { $event, type });
};
</script>
<style lang="less" scoped>
.container {
  padding: 22px 0;
  .list-title {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    padding: 0 12px;
  }
  .list-content {
    font-size: 14px;
    color: #ccc;
    padding-bottom: 16px;
    .content-item {
      padding-top: 16px;
    }
    .content-process {
      font-weight: 400;
      padding: 0 12px;
      .first-box {
        margin-bottom: 4px;
        span:nth-of-type(1) {
          color: #70e2f0;
        }
      }
      .second-box {
        span:nth-of-type(1) {
          color: #d338ff;
        }
      }
      .fit-box {
        span:nth-of-type(1) {
          color: #70e2f0;
        }
        span:nth-of-type(1) {
          color: #d338ff;
        }
      }
    }
    .radio-group {
      padding-left: 12px;
      padding-top: 16px;
      :deep(.arco-radio-group) {
        .arco-radio-label {
          color: #ccc;
        }
        .arco-radio-icon {
          width: 12px;
          height: 12px;
          line-height: 12px;
          border: 1px solid rgba(255, 255, 255, 0.7);
        }
        .arco-radio-icon::after {
          background-color: transparent;
        }
        .arco-radio:hover .arco-radio-icon {
          border-color: #67c9d5;
        }
        .arco-radio:hover .arco-radio-icon-hover::before {
          background-color: transparent;
        }
        .arco-radio-checked .arco-radio-icon {
          border: 1px solid #67c9d5;
          background-color: transparent;
        }
        .arco-radio-checked .arco-radio-icon::after {
          background-color: #67c9d5;
        }
      }
    }
  }
}
</style>
